import React, { useState } from 'react';
import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, DatePicker, Form, Input, Select } from 'antd';

export default function InventoryAlert() {
	const columns = [
		{ title: '商品编码', dataIndex: 'productCode', key: 'productCode' },
		{ title: '商品名称', dataIndex: 'productName', key: 'productName' },
		{ title: '可用库存', dataIndex: 'availableStock', key: 'availableStock' },
		{ title: '在途库存', dataIndex: 'inTransitStock', key: 'inTransitStock' },
		{ title: '近七天总销量', dataIndex: 'totalSales7Days', key: 'totalSales7Days' },
		{ title: '近七天平均销量', dataIndex: 'averageSales7Days', key: 'averageSales7Days' },
		{ title: '预警下限', dataIndex: 'warningLowerLimit', key: 'warningLowerLimit' },
		{ title: '预警上限', dataIndex: 'warningUpperLimit', key: 'warningUpperLimit' },
		{ title: '提醒', dataIndex: 'reminder', key: 'reminder' },
		{ title: '操作', dataIndex: 'operation', key: 'operation' }
	];

	const dataSource = [
		{
			key: '1',
			productCode: 'P001',
			productName: '商品A',
			availableStock: 2000,
			inTransitStock: 30,
			totalSales7Days: 250,
			averageSales7Days: 35,
			warningLowerLimit: 50,
			warningUpperLimit: 200,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '2',
			productCode: 'P002',
			productName: '商品B',
			availableStock: 10,
			inTransitStock: 15,
			totalSales7Days: 180,
			averageSales7Days: 25,
			warningLowerLimit: 40,
			warningUpperLimit: 150,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '3',
			productCode: 'P003',
			productName: '商品C',
			availableStock: 200,
			inTransitStock: 50,
			totalSales7Days: 300,
			averageSales7Days: 43,
			warningLowerLimit: 60,
			warningUpperLimit: 300,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '4',
			productCode: 'P004',
			productName: '商品D',
			availableStock: 50,
			inTransitStock: 10,
			totalSales7Days: 120,
			averageSales7Days: 17,
			warningLowerLimit: 30,
			warningUpperLimit: 100,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '5',
			productCode: 'P005',
			productName: '商品E',
			availableStock: 150,
			inTransitStock: 40,
			totalSales7Days: 220,
			averageSales7Days: 31,
			warningLowerLimit: 80,
			warningUpperLimit: 200,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '6',
			productCode: 'P006',
			productName: '商品F',
			availableStock: 90,
			inTransitStock: 20,
			totalSales7Days: 150,
			averageSales7Days: 21,
			warningLowerLimit: 60,
			warningUpperLimit: 140,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '7',
			productCode: 'P007',
			productName: '商品G',
			availableStock: 70,
			inTransitStock: 0,
			totalSales7Days: 110,
			averageSales7Days: 15,
			warningLowerLimit: 40,
			warningUpperLimit: 120,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '8',
			productCode: 'P008',
			productName: '商品H',
			availableStock: 300,
			inTransitStock: 100,
			totalSales7Days: 500,
			averageSales7Days: 71,
			warningLowerLimit: 100,
			warningUpperLimit: 400,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '9',
			productCode: 'P009',
			productName: '商品I',
			availableStock: 50,
			inTransitStock: 5,
			totalSales7Days: 80,
			averageSales7Days: 11,
			warningLowerLimit: 20,
			warningUpperLimit: 100,
			reminder: '无',
			operation: ['设置']
		},
		{
			key: '10',
			productCode: 'P010',
			productName: '商品J',
			availableStock: 250,
			inTransitStock: 60,
			totalSales7Days: 400,
			averageSales7Days: 57,
			warningLowerLimit: 70,
			warningUpperLimit: 350,
			reminder: '无',
			operation: ['设置']
		}
	];

	return (
		<div>
			<BoxItem>
				<Button style={{ marginRight: '20px' }} size="large" type="primary">
					预警采购
				</Button>
				<Button size="large">导出</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item
						label="商品"
						style={{ width: '1000px', marginBottom: '20px' }}
						wrapperCol={{ span: 10 }}
					>
						<Input placeholder="请输入关键词搜索" />
					</Form.Item>
					<Form.Item label="仓库" style={{ width: '170px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="仓库A">仓库A</Select.Option>
							<Select.Option value="仓库B">仓库B</Select.Option>
							<Select.Option value="仓库C">仓库C</Select.Option>
							<Select.Option value="仓库D">仓库D</Select.Option>
							<Select.Option value="仓库E">仓库E</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="是否设置预警" style={{ width: '250px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="全部">全部</Select.Option>
							<Select.Option value="有预警">有预警</Select.Option>
							<Select.Option value="无预警">无预警</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="预警状况" style={{ width: '250px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="全部">全部</Select.Option>
							<Select.Option value="有预警">有预警</Select.Option>
							<Select.Option value="高于上限预警">高于上限预警</Select.Option>
							<Select.Option value="低于下限预警">低于下限预警</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item>
						<Button type="primary" style={{ marginRight: '20px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>

			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
